
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考勤文件上传</title>
</head>
<body>
<p>考勤文件上传 完美版v1.0.1</p>
<div class="upload-container">
    <h2 class="upload-title">考勤文件上传</h2>
    <form method="post" action="/get" enctype="multipart/form-data" class="upload-form">
        <div class="file-input-container">
            <label for="fileWorkTime" class="file-label">
                <span class="file-icon">📂</span>
                <span class="file-text" id="fileText">选择考勤文件</span>
                <input type="file" name="fileWorkTime" id="fileWorkTime" required class="file-input">
            </label>
        </div>
        <button type="submit" class="submit-btn">
            <span class="btn-text">提交文件</span>
            <span class="btn-icon">🚀</span>
        </button>
    </form>
    <p class="upload-hint">支持HTML格式文件，大小不超过5MB</p>
</div>

<style>
    :root { --primary: #4361ee; --primary-light: #7209b7; }
.upload-container { max-width: 500px; margin: 40px auto; padding: 30px; background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    .upload-title { color: var(--primary); text-align: center; margin-bottom: 25px; font-size: 1.8rem; }
    .upload-form { display: flex; flex-direction: column; gap: 20px; }
    .file-input-container { position: relative; }
    .file-label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; border: 2px dashed #e0e0e0; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
    .file-label:hover { border-color: var(--primary); background-color: rgba(67, 97, 238, 0.05); }
    .file-icon { font-size: 2rem; }
    .file-text { font-size: 1.1rem; color: #4a5568; }
    .file-input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
    .submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2); }
    .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3); }
    .upload-hint { margin-top: 15px; text-align: center; color: #7f8c8d; font-size: 0.9rem; }
</style>
<script>
    document.getElementById('fileWorkTime').addEventListener('change', function(e) {
        const fileText = document.getElementById('fileText');
        if (e.target.files.length > 0) {
            fileText.textContent = e.target.files[0].name;
        } else {
            fileText.textContent = '选择考勤文件';
        }
    });
</script>
</body>
</html>
